<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>Penguin System</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>

    <link href="<c:url value='/js/bootstrap/assets/css/bootstrap.css'/> " rel="stylesheet">
    <link href="<c:url value='/js/bootstrap/assets/css/bootstrap-responsive.css'/> " rel="stylesheet">
    <script src="<c:url value='/js/bootstrap/assets/js/bootstrap.js'/>"></script>
    <script src="<c:url value='/js/bootstrap/assets/js/jquery.js'/>"></script>
    <script type="text/javascript" src="<c:url value='/js/jquery/jquery-1.4.2.min.js'/> "></script>
    <style>
        body {
            padding-top: 60px;
            position: relative;
        }

        #table-header {
            border-bottom: 1px solid gray;
        }

        table {
            font-size: 12px;
            margin-left: 300px;
        }

        td {
            text-align: center;
            width: 100px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        th {
            text-align: center;
            width: 100px;
            font-size: 22px;
        }

        .odd {
            background-color: #EEEEEE
        }

        .modified {
            background-color: red;
        }

        .error {
            color: red;
        }
    </style>
</head>
<script>
    function getData() {
        var q = $("#searchIndex").val();
        //var decodeq =encodeURIComponent(encodeURIComponent(q));
        var decodeq = encodeURIComponent(q);
        var offset = $("#numberIndex").val();
        var limit = $("#totalIndex").val();
        $.post("${root}/penguin/search", {"q":decodeq,"offset":offset - 1,limit:limit}, function(result1) {
            var result = eval("(" + result1 + ")");
            var data = result.data;
            var total = result.total;//总共条数
            $("#suoyin").html("关键字列表(共" + total + "条记录)");
            var str = '<tr> <td style="width: 50px;"><h4>序号</h4></td> <td style="width: 450px;"><h4>关键词</h4></td> </tr>';
            var c = '';
            $.each(data, function(i, n) {
                if (i % 2 == 0) {
                    c = "odd";
                } else {
                    c = "even";
                }
                str +=
                        '<tr class=' + c + '>' +
                                '<td style="width: 50px;">' + (i + 1) + '</td>' +
                                '<td style="width: 450px;">' + n.name + '</td>' +
                                '</tr>';
            });
            $("tbody").html(str);
        });
    }

    function addIndex() {
        var indexVal = $("#addIndex").val();
        var decodeIndexVal = encodeURIComponent(indexVal);
        $.post("${root}/penguin/index/add", {"keyword":indexVal}, function(data) {
            if (data == 'ok') {
                alert("增加成功");
            } else {
                alert("增加失败，可能网络出现问题");
            }

        })
    }

</script>
<body>
<div class="navbar navbar-fixed-top navbar-inverse">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                Penguin
            </a>
            <ul class="nav">
                <li>
                    <a href="/">
                        Home
                    </a>
                </li>
                <li class="active">
                    <a href="/penguin/index">
                        关键字列表
                    </a>
                </li>
                <li>
                    <a href="/penguin/index/manager">
                        索引管理
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div id="wrapper">
    <div id="info">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        增加关键词：<input class="input-medium" style="height:23px" id="addIndex" name="addIndex" type="text" />
        <input class="btn btn-primary" type="submit" value="增&nbsp;&nbsp;加"
               onclick="addIndex()"/>

        <p></p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        关键词：<input class="input-medium search-query" id="searchIndex" name="searchIndex" type="text" style="height:23px" />
        &nbsp;&nbsp;
        <input type="button" value="查&nbsp;&nbsp;询" class="btn btn-primary" onclick="getData()"/>
        &nbsp;&nbsp;
        开始记录数：<input id="numberIndex" value="1" name="searchIndex" type="text" class="input-mini search-query" style="height:23px" />
        &nbsp;&nbsp;
        页面显示数量：<input id="totalIndex" value="20" name="searchIndex" type="text" class="input-mini search-query" style="height:23px"/>
    </div>
    <div id="content">
        <div id="table-header">
            <table>
                <thead>
                <tr>
                    <th id="suoyin" style="height:50px;width:450px; color: #D14">关键词列表</th>
                </tr>
                </thead>
            </table>
        </div>
        <div id="table-data" style="overflow:auto;">
            <table align='center' style='border:1px solid #000000;'>
                <tbody>
                <tr>
                    <td style="width: 50px;"><h4>序号</h4></td>
                    <td style="width: 450px;"><h4>关键词</h4></td>
                </tr>
                <c:forEach var="i" begin="1" end="20">
                    <tr class=${i % 2 == 0?"even":"odd"}>
                        <td style="width: 50px;">${i}</td>
                        <td style="width: 450px;"></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>